<template>
  <div class="accountexpend">
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="状态：">
        <el-select v-model="state" placeholder="请选择">
          <el-option label="初始化" value="0" />
          <el-option label="正常" value="1" />
          <el-option label="已结算" value="5" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="状态：">
        <el-select v-model="state" value-key="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="开始时间：">
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="起止时间：">
        <el-date-picker
          v-model="value1"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="" class="el-icon-search" @click="onSubmit()"
          >查询</el-button
        >
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="" class="el-icon-setting">提交</el-button>
      </el-form-item> -->
    </el-form>
    <!-- 支出申请表格 -->
    <div class="elTab">
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        ref="multipleTable"
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        tooltip-effect="dark"
        border
        v-show="this.expapply"
        height="100%"
      >
        <el-table-column prop="" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.ReviewResult == 2"
              size="small"
              @click="giv(scope.row)"
              >提交</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.ReviewResult == 2"
              size="small"
              style="color: #ff8888"
              @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="60px">
        </el-table-column>
        <el-table-column prop="ReviewResult" label="业务状态" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.ReviewResult == 0">未提交</span>
              <span v-else-if="scope.row.ReviewResult == 1">待审核</span>
              <span v-else-if="scope.row.ReviewResult == 2">审核退回</span>
              <span v-else-if="scope.row.ReviewResult == 9">审核通过</span>
              <span v-else-if="scope.row.ReviewResult == 3">制单打印</span>
              <span v-else-if="scope.row.ReviewResult == 4">财务到账</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Socialsecuritytype" label="参保类型" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.Socialsecuritytype == 0">其他</span>
              <span v-else-if="scope.row.Socialsecuritytype == 1">城居保</span>
              <span v-else-if="scope.row.Socialsecuritytype == 2">职保</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="姓名" width="90" />
        <el-table-column prop="gender" label="性别" width="60">
          <!-- <template slot-scope="scope">
            <div v-if="scope.row.GenderCode == 1">男</div>
            <div v-else>女</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="IdentityNum" label="身份证号" width="180" />
        <el-table-column prop="Balance" label="账户余额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.Balance, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OutMoney" label="支出金额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.OutMoney, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OperName" label="经办人" width="100">
        </el-table-column>
        <el-table-column prop="OperTime" label="经办时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.OperTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ReviewName" label="审核人" width="100">
        </el-table-column>
        <el-table-column prop="ReviewTime" label="审核时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.ReviewTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FinanceName" label="到账人" width="100">
        </el-table-column>
        <el-table-column prop="FinanceTime" label="到账时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.FinanceTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" fixed="right" label="预览" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="look(scope.row)"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
    >
    </el-pagination>
    <el-dialog title="" :visible.sync="showInfo" class="land" width="600px">
      <el-form
        :model="gridData"
        inline
        :label-position="labelPosition"
        label-width="100px"
        class="demo-form-inline bigBan"
      >
        <el-form-item label="姓名">{{
          gridData.Name == null ? "--" : gridData.Name
        }}</el-form-item>
        <el-form-item label="乡镇">{{
          gridData.Township == null ? "--" : gridData.Township
        }}</el-form-item>
      </el-form>
      <el-form
        :model="gridData"
        inline
        :label-position="labelPosition"
        label-width="100px"
        class="demo-form-inline bigBan"
      >
        <el-form-item label="性别">{{ gridData.gender }}</el-form-item>
        <el-form-item label="村">{{
          gridData.Village == null ? "--" : gridData.Village
        }}</el-form-item>
      </el-form>
      <el-form
        :model="gridData"
        inline
        :label-position="labelPosition"
        label-width="100px"
        class="demo-form-inline bigBan"
      >
        <el-form-item label="身份证号">{{
          gridData.IdentityNum == null ? "--" : gridData.IdentityNum
        }}</el-form-item>
        <el-form-item label="项目名称">{{
          gridData.ProjectName == null ? "--" : gridData.ProjectName
        }}</el-form-item>
      </el-form>
      <el-form
        :model="gridData"
        :label-position="labelPosition"
        label-width="100px"
        class="demo-form-inline"
      >
        <el-form-item label="电话">
          {{ gridData.PhoneNum == null ? "--" : gridData.PhoneNum }}
        </el-form-item>
        <el-form-item label="开户行">
          {{ gridData.BankName == null ? "--" : gridData.BankName }}
        </el-form-item>
        <el-form-item label="银行账号">{{
          gridData.BankAccount == null ? "--" : gridData.BankAccount
        }}</el-form-item>
        <el-form-item label="账户余额"
          >{{
            gridData.Balance == null ? "--" : gridData.Balance
          }}（元）</el-form-item
        >
        <el-form-item label="支出金额">
          {{
            gridData.OutMoney == null ? "--" : gridData.OutMoney
          }}（元）</el-form-item
        >
        <el-form-item label="大写金额">{{
          gridData.OutMoney == null
            ? "--"
            : this.$moneyBig.required(gridData.OutMoney)
        }}</el-form-item>
        <!-- <el-form-item style="text-align: right">
          <el-button @click="showInfo = false">确定</el-button></el-form-item
        > -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="clear">取 消</el-button> -->
        <el-button type="primary" style="width: 110px;" @click="showInfo = false">确  定</el-button>
      </span>
    </el-dialog>
    <div class="row" id="printTest" style="visibility: hidden">
      <div id="div1">
        <div class="title" style="text-align: center">
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-if="gridData.Socialsecuritytype == 0"
          >
            被征地农民参保补贴账户支出登记表{{ "(" + "其他" + ")" }}
          </h3>
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-else-if="gridData.Socialsecuritytype == 1"
          >
            被征地农民参保补贴账户支出登记表{{ "(" + "城居保" + ")" }}
          </h3>
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
            v-else
          >
            被征地农民参保补贴账户支出登记表{{ "(" + "职保" + ")" }}
          </h3>
        </div>
        <table width="100%">
          <tr>
            <td style="border: none; font-size: 8pt">
              <p>
                <span id="ProjectName">{{
                  gridData.Township +
                  "" +
                  gridData.Village +
                  gridData.ProjectName
                }}</span>
              </p>
            </td>
            <td style="text-align: left; border: none; font-size: 8pt">
              <p><span id="ProjectName"></span></p>
            </td>
            <td colspan="2"></td>
            <td></td>
            <td style="text-align: right; font-size: 8pt">
              <!-- <span tdata="pageNO" format="#">第#页</span>/<span
                tdata="pageCount"
                format="#"
                >总##页</span
              > -->
              <p>
                <span>登记日期:</span
                ><span id="ProjectName">{{ timeout(new Date()) }}</span>
              </p>
            </td>
          </tr>
        </table>
      </div>
      <div id="div2">
        <table style="border: 1px solid" width="100%">
          <tr>
            <td style="text-align: center; width: 16.5%" colspan="3">
              <p>
                <span>姓名</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="3">
              <p>
                <span id="township">{{ gridData.Name }}</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="3">
              <p>
                <span>性别</span>
              </p>
            </td>
            <td style="text-align: center; width: 16.5%" colspan="3">
              <p>
                <span id="Village">{{ gridData.gender }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="3">
              <p>
                <span>身份证号</span>
              </p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span id="YearNum">{{ gridData.IdentityNum }}</span>
              </p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span>联系电话</span>
              </p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span id="BatchNum">{{ gridData.PhoneNum }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="3">
              <p><span>开户银行</span></p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span id="HouseholdCount">{{ gridData.BankName }} </span>
              </p>
            </td>
            <td style="text-align: center" colspan="3">
              <p><span>银行账号</span></p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span id="LevyScale">{{ gridData.BankAccount }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="3">
              <p><span>账户余额</span></p>
            </td>
            <td style="text-align: center" colspan="3">
              <p>
                <span id="FarmerCount"
                  >{{
                    gridData.Balance == ""
                      ? "0"
                      : number_format(gridData.Balance, 2)
                  }}元</span
                >
              </p>
            </td>
            <td style="text-align: center" colspan="3">
              <p><span>支出金额</span></p>
            </td>
            <td colspan="3" style="text-align: center">
              <p>
                <span style="text-align: right" id="SecurityAmount"
                  >{{ number_format(gridData.OutMoney, 2) }}元
                </span>
              </p>
            </td>
          </tr>
          <tr>
            <td style="text-align: center" colspan="3">
              <p><span>支出金额（大写）</span></p>
            </td>
            <td style="text-align: left" colspan="9">
              {{ this.$moneyBig.required(gridData.OutMoney) }}
            </td>
          </tr>
          <tr>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="2"
            >
              <div style="margin-top: -20px">申请人：</div>
            </td>
            <td style="text-align: left; width: 20%; height: 50px" colspan="2">
              <div style="margin-top: -17px">经办人：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="2"
            >
              <div style="margin-top: -20px">审核人：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="3"
            >
              <div style="margin-top: -20px">领导签字：</div>
            </td>
            <td
              style="
                text-align: left;
                width: 20%;
                height: 50px;
                line-height: 25px;
              "
              colspan="3"
            >
              <div style="margin-top: -20px">领取人签字：</div>
            </td>
          </tr>
          <!-- <tr>
            <td colspan="6">{{'制表人：' + user_zd}}</td>
            <td colspan="6">{{'制表时间：'+ dateToString(new Date())}}</td>
          </tr> -->
        </table>
      </div>
      <div id="div4">
        <table style="border: 0px solid" width="100%">
          <tr>
            <td style="text-align: left; font-size: 8pt">
              制表人：{{ user_zd }}
            </td>
            <td></td>
            <td style="text-align: left; font-size: 8pt">
              制表时间:{{ dateToString(new Date()) }}
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  API_ZHICHU_TJZC,
  API_ZHICHU_GOAGL,
  API_ZHICHU_ACTR,
  API_ZHICHU_SC,
  API_ZHICHU_GVA,
  API_ZHICHU_ACGVD,
} from "../../api/account";
export default {
  name: "",
  data() {
    return {
      msg: "账户支出管理",
      state: 1, // 状态
      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: 0,
          label: "初始化",
        },
        {
          value: 5,
          label: "已结算",
        },
      ],
      value: "", // 起止时间
      value1: [],
      value2: "",
      tableData: [],
      currentPage3: 1,
      expapply: true,
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      showInfo: false,
      gridData: {},
      labelPosition: "right", // 征地项目详情输入框文字右对齐
      user_zd: "",
    };
  },
  methods: {
    //
    onSubmit() {
      let timestart = null;
      let timeend = null;
      if (
        this.value1[0] == "" ||
        this.value1[0] == null ||
        this.value1[1] == "" ||
        this.value1[1] == null
      ) {
        this.$message.warning("请选择起止时间！");
      } else {
        var reg = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
        var regExp = new RegExp(reg);
        console.log(reg.test(this.value1[0].toString()));
        console.log(reg.test(this.value1[1].toString()));
        if (regExp.test(this.value1[0]) && regExp.test(this.value1[1])) {
          timestart = this.value1[0];
          timeend = this.value1[1];
          console.log(1);
        } else {
          console.log(2);
          timestart =
            this.value1[0].getFullYear() +
            "-" +
            (this.value1[0].getMonth() + 1) +
            "-" +
            this.value1[0].getDate();
          timeend =
            this.value1[1].getFullYear() +
            "-" +
            (this.value1[1].getMonth() + 1) +
            "-" +
            this.value1[1].getDate();
        }
        console.log(timestart); // 开始时间
        console.log(timeend); // 结束时间
        let data = {
          ReviewResult: 99,
          SDT: timestart,
          EDT: timeend,
        };
        API_ZHICHU_ACGVD(data)
          .then((res) => {
            console.log(res);
            this.tableData = res.ResList;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.expapply = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    look(row) {
      this.gridData = row;
      // this.$confirm("确定预览？")
      // .then((_) => {
      // debugger
      // console.log(this.gridData);
      // })
      // .then((_) => {
      // this.print();
      // });
      // this.showInfo = true;
      setTimeout(() => {
        this.print();
      });
    },
    print() {
      LODOP.PRINT_INIT("被征地农民参保补贴账户支出登记表（职保）");
      var strStyle =
        "<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}span{  font-size:8pt ;text-align:left;margin-top:5px;margin-left:15px;}td{font-size:8pt ;padding:5px;}</style>";
      LODOP.ADD_PRINT_HTM(
        26,
        "5%",
        "90%",
        109,
        document.getElementById("div1").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
      LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 1);
      LODOP.ADD_PRINT_TABLE(
        100,
        "5%",
        "RightMargin:1cm",
        400,
        strStyle + document.getElementById("div2").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "Offset2Top", -100);
      LODOP.ADD_PRINT_HTM(
        "73mm",
        "15mm",
        "200mm",
        "2cm",
        document.getElementById("div4").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
      LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 4);
      //LODOP.SET_PRINT_STYLEA(0, "VOrient", 1);
      LODOP.PREVIEW();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    query() {
      API_ZHICHU_TJZC()
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    giv(row) {
      let data = [
        {
          Id: row.Id,
        },
      ];
      API_ZHICHU_ACTR(data)
        .then((res) => {
          console.log(res);
          this.$message.success("提交成功");
          this.onSubmit();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    del(row) {
      let data = [
        {
          Id: row.Id,
        },
      ];
      API_ZHICHU_SC(data)
        .then((res) => {
          console.log(res);
          this.$message.success("删除成功");
          this.onSubmit();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nowTim() {
      this.value1[0] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
      this.value1[1] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
    },
    timeout(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "年" + m + "月" + d + "日";
    },
    // 时间戳格式化
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    // 金额格式化
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
  },
  created() {
    // this.query();
    this.nowTim();
    this.user_zd = localStorage.getItem("user");
    this.onSubmit();
  },
};
</script>

<style scoped lang="scss">
.accountexpend {
  padding: 30px;
  .el-pagination {
    // max-width: 1136px;
    margin-top: 10px;
    max-width: 2055px;
    text-align: right;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0 !important;
    height: 45px !important;
    line-height: 45px !important;
  }
  ::v-deep .elTab {
    height: calc(100vh - 220px);
    min-height: 415px !important;
    max-width: 2072px;
    .el-button {
      padding: 0;
    }
  }
  @media only screen {
    #printTest {
      display: none;
    }
  }
}
</style>
